<script setup>
import MainLayout from '@/layouts/MainLayout.vue'
import NavigationBar from '@/components/NavigationBar.vue'
</script>

<template>
  <MainLayout>
    <div class="main-container">
      <NavigationBar />
      <!-- 主内容区域 -->
      <div class="content-wrapper">
        <!-- 二级路由出口 -->
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </div>
    </div>
  </MainLayout>
</template>

<style scoped>
.main-container {
  @apply h-screen flex flex-col;
}
.content-wrapper {
  @apply flex-1 overflow-auto p-4;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>